import React, { useEffect, Fragment } from 'react';
import { Card, Col, Form, Row, Button, Empty } from 'antd';
import { connect } from 'umi';
import useMapData from '@/hooks/useMapData';

import cn from 'classnames';
import echarts from 'echarts';
import { formatMessage } from 'umi';
import QueryPage from '@/components/QueryPage';
import Locale from '@/utils/locale';
import CompanyDepart from '@/components/CompanyDepart';
import request from '@/utils/request';
import { exists } from '@/utils/utils';
import { withRoutePage } from '@/utils/enhanceUtils';
import styles from './index.less';
import Nlfb from './ygtzComponents/Nlfb';
import Xbfb from './ygtzComponents/Xbfb';
import Xlfb from './ygtzComponents/Xlfb';
import Ygzj from './ygtzComponents/Ygzj';
import YgjgCn from './ygtzComponents/YgjgCn';
import YgjgSg from './ygtzComponents/YgjgSg';

const { locale } = new Locale('zzjgfx');

const YgtxFx = ({ dispatch, hr, form, route }) => {
    const user = localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : {};
    const { getFieldDecorator } = form;
    const { nlfb, xbfb, xlfb, ygzj, ygjgfb } = hr;
    const getParmes = values => {
        const parmes = {};
        if (values.departmentId) {
            parmes.organizationCode = values.departmentId;
            parmes.orgFlag = 0;
        } else if (values.companyId) {
            parmes.organizationCode = values.companyId;
            parmes.orgFlag = 1;
        } else {
            parmes.organizationCode = '';
            parmes.orgFlag = '';
        }
        return parmes;
    };
    const getData = values => {
        dispatch({
            type: 'hr/getYgtzfx',
            payload: getParmes(values)
        });
    };
    const handleSubmit = e => {
        e.preventDefault();
        form.validateFieldsAndScroll((err, values) => {
            if (!err) {
                getData(values.companyId);
            }
        });
    };
    const init = async () => {
        // 永华确认以下接口以废弃：
        // const result = await request('/api/oa/v1/department/getemployeeanalysetree', {
        //     params: {
        //         organizationCode: user.companyId,
        //         permissionUrl: route.code
        //     }
        // });
        const result = await request('/api/org/v1/functional/list', {
            method: 'POST',
            data: {
                getChildByOrganizationCode: user.companyId,
                permissionUrl: route.code,
                showTreeFlag: 1,
                organizationTypes: [3, 4]
            }
        });

        if (result.code === 10000) {
            if (!exists(result.data, 'id', Number(user.departmentId))) {
                form.setFieldsValue({
                    companyId: {
                        ...form.getFieldValue('companyId'),
                        departmentId: undefined
                    }
                });
            } else {
                form.setFieldsValue({
                    companyId: {
                        ...form.getFieldValue('companyId'),
                        departmentId: undefined
                    }
                });
            }
            getData(form.getFieldValue('companyId'));
        }
    };

    useEffect(() => {
        init();
    }, []);

    const [asianJson] = useMapData('asian');
    const [chinaJson] = useMapData('china');

    useEffect(() => {
        echarts.registerMap('asian', asianJson);
    }, [asianJson]);

    useEffect(() => {
        echarts.registerMap('china', chinaJson);
    }, [chinaJson]);

    return (
        <Fragment>
            <QueryPage
                style={{ overflow: 'hidden' }}
                className={styles.queryPageSearch}
                searchBoxStyle={styles.searchBox}
                background="transparent"
                form={
                    <Row type="flex" justify="space-between">
                        <Col>
                            <h3>筛选条件</h3>
                        </Col>
                        <Col>
                            <Form layout="inline" onSubmit={handleSubmit} className={styles.form}>
                                <Form.Item label="选择公司部门">
                                    {getFieldDecorator('companyId', {
                                        initialValue: { companyId: user.companyId }
                                    })(
                                        <CompanyDepart
                                            customDepartmentRequest={{
                                                url: '/api/oa/v1/department/getemployeeanalysetree'
                                            }}
                                            onlyLevelOne
                                            permissionCode={route.code}
                                        />
                                    )}
                                </Form.Item>
                                <Form.Item>
                                    <Button type="primary" htmlType="submit">
                                        {locale('form.search', false)}
                                    </Button>
                                </Form.Item>
                            </Form>
                        </Col>
                    </Row>
                }
                routeType="statOrgs"
            />
            <div className={cn(styles.box, styles.second)}>
                <div className={styles.rowList}>
                    <Row>
                        <Col span={24}>
                            <Card title="年龄分布" bordered={false}>
                                {nlfb.length > 0 ? (
                                    <Nlfb data={nlfb} />
                                ) : (
                                    <Empty
                                        style={{ height: 237, padding: '60px 0' }}
                                        image={Empty.PRESENTED_IMAGE_SIMPLE}
                                        description={formatMessage({
                                            id: 'stat.name.zwsj'
                                        })}
                                    />
                                )}
                            </Card>
                        </Col>
                        <Col span={24}>
                            <Card title="学历分布" bordered={false}>
                                {xlfb.length > 0 ? (
                                    <Xlfb data={xlfb} />
                                ) : (
                                    <Empty
                                        style={{ height: 237, padding: '60px 0' }}
                                        image={Empty.PRESENTED_IMAGE_SIMPLE}
                                        description={formatMessage({
                                            id: 'stat.name.zwsj'
                                        })}
                                    />
                                )}
                            </Card>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={24}>
                            <Card title="性别分布" bordered={false}>
                                {xbfb.length > 0 ? (
                                    <Xbfb data={xbfb} />
                                ) : (
                                    <Empty
                                        style={{ height: 237, padding: '60px 0' }}
                                        image={Empty.PRESENTED_IMAGE_SIMPLE}
                                        description={formatMessage({
                                            id: 'stat.name.zwsj'
                                        })}
                                    />
                                )}
                            </Card>
                        </Col>
                        <Col span={24}>
                            <Card title="员工职级分布" bordered={false}>
                                {Object.keys(ygzj).length > 0 ? (
                                    <Ygzj data={ygzj} />
                                ) : (
                                    <Empty
                                        style={{ height: 237, padding: '60px 0' }}
                                        image={Empty.PRESENTED_IMAGE_SIMPLE}
                                        description={formatMessage({
                                            id: 'stat.name.zwsj'
                                        })}
                                    />
                                )}
                            </Card>
                        </Col>
                    </Row>
                </div>
                <Card title="员工籍贯分布" bordered={false}>
                    <Row gutter={20} style={{ width: '100%' }}>
                        <Col xs={24} lg={12} xl={12}>
                            {ygjgfb.southEastAsias.length > 0 ? (
                                <YgjgSg data={ygjgfb.southEastAsias} />
                            ) : (
                                <Empty
                                    image={Empty.PRESENTED_IMAGE_SIMPLE}
                                    description={formatMessage({
                                        id: 'stat.name.zwsj'
                                    })}
                                />
                            )}
                        </Col>
                        <Col xs={24} lg={12} xl={12}>
                            {ygjgfb.chineses.length > 0 ? (
                                <YgjgCn data={ygjgfb.chineses} />
                            ) : (
                                <Empty
                                    image={Empty.PRESENTED_IMAGE_SIMPLE}
                                    description={formatMessage({
                                        id: 'stat.name.zwsj'
                                    })}
                                />
                            )}
                        </Col>
                    </Row>
                </Card>
            </div>
        </Fragment>
    );
};

export default withRoutePage(
    connect(({ hr, loading }) => ({
        hr,
        loading
    }))(Form.create()(YgtxFx))
);
